<template>
  <breadCrumb ref="breadcrumb" :item='item'></breadCrumb>
  <div class="table-wrapped">
    <div class="table-top">
      <div class="table-content">
        <el-table :data="tableData" style="width: 100%;" border>
          <el-table-column type="index" width="50" />
          <el-table-column label="消息主题" prop="message_title" />
          <el-table-column label="消息类别" prop="message_category" />
          <el-table-column label="发布部门" prop="message_publish_department" />
          <el-table-column label="接收对象" prop="message_receipt_object" />
          <el-table-column label="删除日期" prop="message_delete_time">
            <template #default="{ row }">
              <div>{{ row.message_delete_time?.slice(0, 10) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <div>
                <el-button type="success" @click="goRestore(row.id, row.message_title)">还原</el-button>
                <el-button type="danger" @click="goRealDelete(row.id, row.message_title)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="table-footer">
      <el-pagination :page-size="paginationData.recylePageSize" :current-page="paginationData.recycleCurrentPage"
        :total="paginationData.recycleTotal" @current-change="recycleCurrentChange" layout="prev, pager, next"
        background size="small" />
    </div>
  </div>
  <delete_message ref="deleteMessageRef" :getRecycleBinByPager="getRecycleBinByPager" :deleteTitle="deleteTitle"
    :deleteTips="deleteTips">
  </delete_message>
</template>

<script lang='ts' setup>
import { ref, reactive, computed } from 'vue'
import breadCrumb from '../../../components/breadCrumb.vue'
import { getRecycleBinByPagerAPI, getRecycleBinTotalAPI } from '../../../api/message'
import delete_message from '../components/delete_message.vue'

// 面包屑
const breadcrumb = ref()
// 面包屑参数
const item = ref({
  first: '消息管理',
  second: '回收站'
})

const deleteTitle = ref('')
const deleteTips = ref('')

const tableData = ref([])

// 分页数据
const paginationData = reactive({
  recycleTotal: 1,
  recycleCurrentPage: 1,
  recylePageSize: 5
})
computed(() => {
  tableData.value = tableData.value
})

// 第一页回收站数据
const getRecycleBinByPager = async () => {
  paginationData.recycleCurrentPage = 1
  const res = await getRecycleBinByPagerAPI({ pager: 1 })
  tableData.value = res.data.data
}
getRecycleBinByPager()

// 回收站总数
const getRecycleBinTotal = async () => {
  const res = await getRecycleBinTotalAPI()
  paginationData.recycleTotal = res.data.data
}
getRecycleBinTotal()


// 换页
const recycleCurrentChange = async (pager) => {
  paginationData.recycleCurrentPage = pager
  const res = await getRecycleBinByPagerAPI({ pager: paginationData.recycleCurrentPage })
  tableData.value = res.data.data
}

// 删除
const deleteMessageRef = ref()
const goRealDelete = (id, msgTitle) => {
  deleteTitle.value = '真正删除消息'
  deleteTips.value = '此操作将永久删除该消息, 是否继续?'
  deleteMessageRef.value.open(id, msgTitle)
}

// 还原
const goRestore = (id, msgTitle) => {
  deleteTitle.value = '还原此条消息'
  deleteTips.value = '此操作将还原此条消息, 还原后可在消息列表查看?'
  deleteMessageRef.value.open(id, msgTitle)
}

</script>

<style lang="scss" scoped>
.table-wrapped {
  padding: 8px;
  // height: calc(100vh - 101px);
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .table-top {
    display: flex;
    flex-direction: column;

    .table-content {
      padding: 10px 20px 20px;
      margin-bottom: 8px;
      background: #fff;
    }
  }

  .table-footer {
    display: flex;
  }
}

:deep(.el-table .cell) {
  font-weight: 400;
}
</style>